<!--
针灸医疗记录单
-->

<template>
  <div>
    <!-- <el-button @click="dayin">打印</el-button> -->
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="78px" size="small" @submit.native.prevent>
      <div class="static-content-item-head center">
        <div class="static-content-item">
          <div>姓名：</div>
          <!-- 使用 patientInfo 中的数据 -->
          <div v-if="patientInfo.patientName">{{ patientInfo.patientName }}</div>
        </div>
        <div class="static-content-item">
          <div>性别：</div>
          <!-- 使用 patientInfo 中的数据 -->
          <div v-if="patientInfo.gender">{{ patientInfo.gender == 0 ? '女' : '男' }}</div>
        </div>
        <div class="static-content-item">
          <div>科室：</div>
          <!-- 使用 patientInfo 中的数据 -->
          <div v-if="patientInfo.department">{{ patientInfo.department }}</div>
        </div>
        <div class="static-content-item">
          <div>床号：</div>
          <!-- 使用 patientInfo 中的数据 -->
          <div v-if="patientInfo.bedNum">{{ patientInfo.bedNum }}</div>
        </div>
        <div class="static-content-item">
          <div>病案号：</div>
          <!-- 使用 patientInfo 中的数据 -->
          <div v-if="patientInfo.admissionNum">{{ patientInfo.admissionNum }}</div>
        </div>
      </div>
      <div class="center">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <div>
        <div class="record-title">针灸医疗记录单</div>
      </div>
      <div class="table-container">
        <table class="table-layout center">
          <tbody>
            <tr>
              <td class="table-cell">姓名</td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled" v-model="formData.patientName" type="text" placeholder="请输入"></td>
              <td class="table-cell">性别</td>
              <td class="table-cell">
                <el-select v-if="formData.showInput" v-model="formData.gender" :disabled="disabled" placeholder="请选择">
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
                </el-select>
              </td>
              <td class="table-cell">年龄</td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled" v-model="formData.age" type="text" placeholder="请输入"></td>
              <td class="table-cell">病案号</td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled" v-model="formData.admissionNum" type="text" placeholder="请输入"></td>
              <td class="table-cell">床号</td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled" v-model="formData.bedNum" type="text" placeholder="请输入"></td>
              <td class="table-cell">接诊医生</td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled" v-model="formData.doctor" type="text" placeholder="请输入"></td>
              <td class="table-cell">其他</td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled" v-model="formData.other" type="text" placeholder="请输入"></td>
            </tr>
            <tr style="height: 100px;">
              <td class="table-cell">诊断</td>
              <td class="table-cell" colspan="6"><textarea v-if="formData.showInput" :disabled="disabled" v-model="formData.coreDiagnosis" type="text" placeholder="请输入" class="textareaStyle"></textarea></td>
              <td class="table-cell">注意事项</td>
              <td class="table-cell" colspan="6"><textarea v-if="formData.showInput" :disabled="disabled" v-model="formData.note" type="text" placeholder="请输入" class="textareaStyle"></textarea></td>
            </tr>
            <tr>
              <td class="table-cell" style="border-bottom: none;">治疗项目</td>
              <td class="table-cell" colspan="13" style="border-bottom: none;">
                <el-form-item prop="acupunctureTreatmentInfos" class="label-right-align" label-width="0">
                  <el-checkbox-group :disabled="disabled" v-model="formData.acupunctureTreatmentInfos">
                    <el-checkbox v-for="(item, index) in acupunctureTreatmentInfosOptions" :key="index" :label="item.value" :disabled="item.disabled" style="display: inline">{{ item.label
                      }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
        <table class="table-layout center">
          <tbody>
            <tr>
              <td class="table-cell" rowspan="2">日期</td>
              <td class="table-cell" rowspan="2">治疗部位</td>
              <td class="table-cell" rowspan="2">进针前不适主诉及注意</td>
              <td class="table-cell" rowspan="2">进/出针查对</td>
              <td class="table-cell" rowspan="2">出针后不适主诉及注意</td>
              <td class="table-cell" colspan="3">签名确认</td>
            </tr>
            <tr>
              <td class="table-cell">针灸医师</td>
              <td class="table-cell">核对医生</td>
              <td class="table-cell">时间</td>
            </tr>
            <tr v-for="(item, index) in formData.specificAcupunctureInfos" :key="index">
              <td class="table-cell">
                <!-- <input v-if="formData.showInput" v-model="item.treatmentDate" type="text" placeholder="请输入"> -->
                <el-date-picker v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.treatmentDate" type="datetime" placeholder="请选择日期和时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.treatmentPart" type="text" placeholder="请输入"></td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.beforeAcupunctureComplaint" type="text" placeholder="请输入"></td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.checkInfo" type="text" placeholder="请输入"></td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.afterAcupunctureComplaint" type="text" placeholder="请输入"></td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.acupunctureDoctor" type="text" placeholder="请输入"></td>
              <td class="table-cell"><input v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.checkDoctor" type="text" placeholder="请输入"></td>
              <td class="table-cell" style="overflow: hidden;">
                <el-date-picker v-if="formData.showInput" :disabled="disabled && !item.isNew" v-model="item.checkTime" type="datetime" placeholder="请选择日期和时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="whole">
          <el-button type="primary" v-if="$listeners.addSpeciInfos" @click="$listeners.addSpeciInfos">新增</el-button>
        </div>
      </div>

      <div class="footer center">
        <el-form-item label="备注：">
          <div class="static-content-item">
            <div>1、ADL评定为Ⅰ～Ⅳ四级：</div>
            <input v-if="formData.showInput" v-model="formData.adlLevel" type="text" placeholder="请输入">
          </div>
          <div class="static-content-item">
            <div class="">2、疗程结束后疗效：</div>
            <input v-if="formData.showInput" v-model="formData.afterTreatmentEffect" type="text" placeholder="请输入">
          </div>
          <div class="static-content-item">
            <div>3、其他：</div>
            <input v-if="formData.showInput" v-model="formData.remarksOther" type="text" placeholder="请输入">
          </div>
          <div class="static-content-item">
            <div>终止治疗原因：</div>
            <input v-if="formData.showInput" v-model="formData.stopTreatmentReason" type="text" placeholder="请输入">
          </div>
          <div class="static-content-item">
            <div>记录人员：</div>
            <input v-if="formData.showInput" v-model="formData.recordUser" type="text" placeholder="请输入">
          </div>
          <div class="static-content-item">
            <div>医生盖章：</div>
            <input v-if="formData.showInput" v-model="formData.doctorStamp" type="text" placeholder="请输入">
          </div>
          <div class="static-content-item">
            <div>盖章日期：</div>
            <el-date-picker v-if="formData.showInput" v-model="formData.stampDate" type="datetime" placeholder="请选择日期和时间" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
            <!-- <input v-if="formData.showInput" v-model="formData.stampDate" type="text" placeholder="请输入"> -->
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment';

const initDefaultForm = () => {
  return {
    patientName: '',
    gender: '',
    department: '',
    bedNum: '',
    admissionNum: '',
    age: '',
    doctor: '',
    other: '',
    coreDiagnosis: '',
    note: '',
    acupunctureTreatmentInfos: [],
    specificAcupunctureInfos: [],
    adlLevel: 0,
    afterTreatmentEffect: '',
    remarksOther: '',
    stopTreatmentReason: '',
    recordUser: '',
    doctorStamp: '',
    stampDate: '',
    showInput: true // 控制输入框显示
  };
};

export default {
  name: 'Acupuncture',
  props: {
    formType: {
      type: String,
      default: 'template' // 表单类型：template：模板，edit：评估，view：详情
    },
    patientInfo: {
      type: Object,
      default: () => ({}) // 患者信息
    },
    doctorType: {
      type: String,
      default: 'hospital' // 医生类型：hospital：住院医生，outpatient：门诊医生，therapists：治疗师
    },
    assessInfo: {
      type: Object,
      default: () => ({}) // 评定表信息
    }
  },
  data() {
    return {
      acupunctureTreatmentInfosOptions: [
        {
          "label": "刃针",
          "value": 1
        }, {
          "label": "体针",
          "value": 2
        }, {
          "label": "电针",
          "value": 3
        }, {
          "value": 4,
          "label": "头皮"
        }, {
          "value": 5,
          "label": "耳针"
        }, {
          "value": 6,
          "label": "拔罐"
        }, {
          "value": 7,
          "label": "灸法"
        }, {
          "value": 8,
          "label": "红外"
        }, {
          "value": 9,
          "label": "穴位敷贴"
        }, {
          "value": 10,
          "label": "穴位注射"
        }
        // 这里可以添加具体的选项
      ],
      rules: {
        // 这里可以添加表单验证规则
      },
      formData: initDefaultForm(),
      disabled: true
    };
  },
  created() {
    this.getRoute();
  },
  computed: {
    patientStruct() {
      if (this.formType === 'edit' || this.formType === 'view') {
        if (['hospital', 'therapists'].includes(this.doctorType)) {
          return [
            {
              label: '姓名',
              key: 'patientName'
            },
            {
              label: '病区',
              key: 'sickRegion'
            },
            {
              label: '床号',
              key: 'bedNum'
            },
            {
              label: '住院号',
              key: 'admissionNum'
            }
          ];
        } else {
          return [
            {
              label: '姓名',
              key: 'patientName'
            },
            {
              label: '门诊号',
              key: 'admissionNum'
            }
          ];
        }
      } else {
        return [
          {
            label: '姓名',
            key: ''
          },
          {
            label: '门诊号/住院号',
            key: ''
          }
        ];
      }
    }
  },
  watch: {
    assessInfo: function (val) {
      this.formData = Object.assign(initDefaultForm(), this.assessInfo);
      this.formData.specificAcupunctureInfos = this.formData.specificAcupunctureInfos && this.formData.specificAcupunctureInfos.map(item => {
        if (typeof item.checkTime === 'number') {
          item.checkTime = moment(item.checkTime).format('YYYY-MM-DD HH:mm:ss');
        }
        if (typeof item.treatmentDate === 'number') {
          item.treatmentDate = moment(item.treatmentDate).format('YYYY-MM-DD HH:mm:ss');
        }
        return item;
      });
    },
    formData: {
      handler: function () {
        this.time && clearTimeout(this.time);
        this.time = setTimeout(() => {
          this.$listeners.asyncInfor(this.formData);
          clearTimeout(this.time);
          this.time = null;
        }, 500);
      },
      deep: true
    }
  },
  mounted() {
    this.formData = Object.assign(initDefaultForm(), this.assessInfo);
    this.formData.specificAcupunctureInfos = this.formData.specificAcupunctureInfos.map(item => {
      if (typeof item.checkTime === 'number') {
        item.checkTime = moment(item.checkTime).format('YYYY-MM-DD HH:mm:ss');
      }
      if (typeof item.treatmentDate === 'number') {
        item.treatmentDate = moment(item.treatmentDate).format('YYYY-MM-DD HH:mm:ss');
      }
      return item;
    });
  },
  methods: {
    getRoute() {
      // 0 评估 / 2 详情
      let { type = 0 } = this.$route.query
      this.disabled = !!type;
    },
    change(e) {
      console.log(e, this.testValue);
    },
    dayin() {
      // 打印功能逻辑
    },
    getFormData() {
      return new Promise((resolve) => {
        resolve(this.formData);
      });
    },
    saveLocalFormData(source, patientId) {
      // 保存本地表单数据的逻辑
      return new Promise((resolve) => {
        resolve();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 样式代码 */
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 16px;
      overflow-wrap: break-word;

      /deep/ .el-date-editor {
        width: 100% !important;
        border: 0;
        .el-input {
          width: 100% !important;
        }
      }
    }
  }
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.static-content-item-head {
  min-height: 20px;
  font-size: 15px;
  display: flex;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

::v-deep .el-divider--horizontal {
  margin: 0;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

::v-deep .el-form-item__label {
  font-size: 16px;
}

.el-form-item {
  margin-bottom: 0px;
}

.footer {
  font-size: 20px;

  input {
    text-align: left;
    width: 40%;
  }
}

//宽度
.w-50 {
  width: 50px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

// 去除input样式
input {
  border: none;
  text-align: center;
  width: 100%;
}

input[type="text"]:focus {
  outline: none;
}

input::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}

.textareaStyle {
  width: 100%;
  height: 93%;
  margin-top: 10px;
}

textarea {
  border: none;
  text-align: center;
  width: 100%;
}

textarea[type="text"]:focus {
  outline: none;
}

textarea::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}

.whole {
  width: 80%;
  margin: 0 auto;
  padding-top: 8px;
}
</style>
